import React, { Component, createRef } from 'react'
import { Modal, message, Button } from 'antd'
import { post } from '@/lib'
import styles from './ImportExcel.module.css' // 引入css
import * as XLSX from 'xlsx'; // 导入excel的方法

export default class Detail extends Component {
  inputRef = createRef(); // 创建一个引用变量获取dom节点

  state = {
    visible: false, // 是否显示
  };
  show = () => {
    this.setState({
      visible: true,
    });
  }

  downloadTemplate = () => { // 下载模板
    const list = [{
      '姓名': '',
      '手机号码': '',
      '性别':'',
      '密码': '',
    }];
    /* 将JSON数据转化为工作簿 */
    const worksheet = XLSX.utils.json_to_sheet(list);
    /* 生成Excel文件 */
    const workbook = XLSX.utils.book_new();
    /* 将工作簿添加到工作簿集合中 */
    XLSX.utils.book_append_sheet(workbook, worksheet, '组织表');
    /* 导出Excel文件 */
    XLSX.writeFile(workbook, '组织模板表.xlsx');
  }

  importExcel = () => { // 导入excel
    this.inputRef.current.click(); // 模拟点击上传文件
  }

  onFileChange = (ev) => { // 上传文件的回调
    const file = ev.target.files[0]; // 获取到上传的文件
    if (!file) {
      return alert('请选择文件');
    }
    const reader = new FileReader(); // 创建一个reader读取文件
    reader.readAsBinaryString(file); // 使用二进制读取
    reader.onload = async (e) => { // 在读取文件的回调总获取文件的内容
        const excelData = XLSX.read(e.target.result, { type: 'binary' });
        const sheetName = excelData.SheetNames[0]; // 获取第一个sheet的名字
        const sheetData = excelData.Sheets[sheetName]; // 获取第一个sheet的数据
        const list = XLSX.utils.sheet_to_json(sheetData); // 讲excel数据转化为json数据
        const errorList = []; // 错误列表
        for (const item of list) {
          const data = await post('/create/organization', {
            $uniq: 'phone', // phone字段为唯一值
            name: item['姓名'],
            phone: item['手机号码'],
            gender: item['性别'],
            password: item['密码'],
          });
          if (data.success) {
            message.success(`导入${item['手机号码']}成功`);
          } else {
            errorList.push({
              '错误信息': data.message,
              ...item,
            });
          }
        }
        if (errorList.length) { // 如果有导入失败的数据
          Modal.error({content: `有${errorList.length}条数据导入失败，已经下载到excel文件中`});
          const worksheet = XLSX.utils.json_to_sheet(errorList); // 错误数据
          const workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, '导入失败的组织表');
          XLSX.writeFile(workbook, '导入失败的组织表.xlsx');
        }

        this.props.refreshList(); // 刷新列表
        ev.target.value = null; // 将input还原
    }
  }

  render() {
    const { visible } = this.state;
    return (
      visible && // 直接刷新一下dom
      <Modal
        title="导入excel"
        centered
        open={visible}
        onCancel={() => this.setState({ visible: false })}
        width={800}
        footer={null}
      >
        <div className={styles.container}>
          <div className={styles.info}>
            <div className={styles.item}>1. 姓名填入真实姓名</div>
            <div className={styles.item}>2. 密码不少于6为，必须包含一个字母</div>
            <div className={styles.item}>3. 手机号码填写真实号码</div>
          </div>
          <div className={styles.buttons}>
            <Button type="primary" style={{margin: '0 10px'}} onClick={this.downloadTemplate}>下载模板</Button >
            <Button type="primary" onClick={this.importExcel}>导入excel</Button >
          </div>
          <input ref={this.inputRef}  style={{display: 'none'}} type="file" onChange={this.onFileChange} />
        </div>
      </Modal>
    )
  }
}
